<template>
  <div class="PieLenderBox">
    <div
      class="PieLenderBox-item"
      v-for="(item, index) in objList.Data"
      :key="index"
    >
      <!-- ${objList.colorList[index]} -->

      <div
        class="PieLenderBox-dian"
        :style="`border: 3px solid ${objList.colorList[index][1]}`"
      ></div>
      <div class="PieLenderBox-name" :title="item.name">
        {{ item.name }}
      </div>
      <div
        class="PieLenderBox-shuliang"
        :title="item.name"
        :style="`color:${objList.colorList[index][1]}`"
      >
        {{ item.value }}
      </div>
      <div class="PieLenderBox-danwei">{{ objList.danwei }}</div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
onMounted(() => {
  objList.value = props.PieLenderObj
})
const props = defineProps({
  PieLenderObj: {
    type: Object
  }
})
const objList = ref({})
// 需要的数据源
// const objList = {
//   danwei: "亩",
//   Data: [
//     { value: 10, name: "农作物一" },
//     { value: 80, name: "农作物二" },
//     { value: 60, name: "农作物三" },
//     { value: 60, name: "农作物四" },
//     { value: 60, name: "农作物五" }
//   ],
//   colorList: [
//     ["rgba(69,246,190,.5)", "rgba(69,246,190)"],
//     ["rgba(241,158,80,.5)", "rgba(241,158,80)"],
//     ["rgba(89,197,247,.5)", "rgba(89,197,247)"],
//     ["rgba(222,220,111,.5)", "rgba(222,220,111)"],
//     ["rgba(42,197,197,.5)", "rgba(42,197,197)"],
//     ["rgba(232,95,95,.5)", "rgba(232,95,95)"],
//     ["rgba(102,153,255,.5)", "rgba(102,153,255)"],
//     ["rgba(178,102,255,.5)", "rgba(178,102,255)"]
//   ]
// }
</script>
<style scoped lang="less">
.PieLenderBox {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .PieLenderBox-item {
    margin-bottom: 7px;
    width: 100%;
    height: 18px;
    display: flex;
    align-items: center;
    // background-color: rgba(32, 55, 57, 0.5);
    .PieLenderBox-dian {
      margin-right: 6px;
      width: 10px;
      height: 10px;
      background-color: red;
      opacity: 1;
      background: #ffffff;
      box-sizing: border-box;
      // border: 3px solid rgba(47, 221, 194);
      border-radius: 5px;
    }
    .PieLenderBox-name {
      width: 40%;
      height: 18px;
      line-height: 18px;
      font-size: 14px;
      color: #ffffff;
      overflow: hidden; /* 隐藏超出内容 */
      white-space: nowrap; /* 禁止文本换行 */
      text-overflow: ellipsis; /* 使用省略号表示溢出文本 */
    }
    .PieLenderBox-shuliang {
      text-align: right;
      font-weight: 600;
      width: 40%;
      height: 18px;
      line-height: 18px;
      font-size: 18px;
      overflow: hidden; /* 隐藏超出内容 */
      white-space: nowrap; /* 禁止文本换行 */
      text-overflow: ellipsis; /* 使用省略号表示溢出文本 */
    }
    .PieLenderBox-danwei {
      margin-left: 4px;
      color: #fff;
      width: 10%;
      height: 18px;
      line-height: 18px;
      font-size: 14px;
    }
  }
}
</style>
